<template>
	<view>
		<!-- #ifdef H5 -->
		<back></back>
		<!-- #endif -->
		<view class="all">
			<view class="card">
				<view v-for="(item,index) in detail.ordergoods" :key="index">
					<view class="u-flex-center u-row-left u-m-b-20">
						<image :src="item.image" mode="aspectFill" class="head-img"></image>
						<view class="u-flex-center u-row-between" style="width: 100%;">
							<view class="cont">
								<view class="name u-line-2">{{item.title}}</view>
								<view class="cate">规格：{{item.difference}}</view>
								<view class="price u-m-t-20"><text>￥</text>{{item.price}}</view>
							</view>
							<view class="number">×{{item.number}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="top-title">订单信息</view>
				<view class="message-item u-flex u-row-between">
					<view>订单状态</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==0">申请退款</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==1&&detail.type!=1">卖家同意</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==1&&detail.type==1">待卖家退回</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==2">卖家拒绝</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==3">申请平台介入</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==4">成功退款</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==5">退款已关闭</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==6">已提交物流</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==7">第三方退款中</view>
					<view class="red-status" style="color: #606DCE;" v-if="detail.state==8">退款失败</view>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>订单号</view>
					<text>{{detail.order.order_no}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>物流状态</view>
					<text>{{detail.expressType==0?'未收到货':'已收到货'}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>退款类型</view>
					<text>{{detail.type==0?'我要退款(无需退货)':'退货退款'}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>退款金额</view>
					<text>{{detail.price}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>退货理由</view>
					<text v-if="detail.reason==0">不喜欢</text>
					<text v-if="detail.reason==1">空包裹</text>
					<text v-if="detail.reason==2">一直未送达</text>
					<text v-if="detail.reason==3">颜色/尺码不符</text>
					<text v-if="detail.reason==4">质量问题</text>
					<text v-if="detail.reason==5">少件漏发</text>
					<text v-if="detail.reason==6">假冒品牌</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>退货图片</view>

				</view>
				<view class="message-item u-flex">
					<image :src="item" mode="" v-for="(item,index) in detail.images" :key="index" class="refimage"
						@click="look(item)">
					</image>
				</view>

				<view class="message-item u-flex u-row-between" v-if="detail.refuse_content">
					<view>拒绝理由</view>
					<text>{{detail.refuse_content}}</text>
				</view>
			</view>
		</view>
		<!-- v-if="detail.state==0" -->
		<view class="" v-if="!type">
			<view class="box" v-if="detail.state==0">
				<view class="u-flex u-row-between">
					<view class="btn" @click="show5 = true">拒绝退款</view>
					<view class="btn btn2" @click="agree()">同意退款</view>
				</view>
			</view>

		</view>
		<view class="box" v-if="detail.state==6&&detail.type==1&&!type">
			<view class="u-flex u-row-center">
				<view class="btn btn2" @click="rece()">确认收货</view>
			</view>
		</view>
		<!-- v-if="type&&detail.state==1" -->
		<view class="wulbtn" @click="show3=true" v-if="type&&detail.state==1">
			填写退款物流单号
		</view>
		<!-- 拒绝弹窗 -->
		<u-popup v-model="show5" mode="center" border-radius="20">
			<view class="card2">
				<view class="pop-tit">拒绝原因</view>
				<input type="text" v-model="refuse_content" placeholder="请输入拒绝原因"
					class="item u-border-bottom u-flex-center u-row-between" />
				<view class="flex pop-button u-row-between">
					<view class="u-flex-center" @click="show5=false">取消</view>
					<view class="u-flex-center b2" @click="getTui()">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 填写物流单号 -->
		<u-popup v-model="show3" mode="center" border-radius="20">
			<view class="card2">
				<view class="pop-tit">物流信息</view>
				<picker :range="list3" range-key="name" @change="choseKd">
					<view class="item u-border-bottom u-flex-center u-row-between">
						<text>快递公司</text>
						<text class="right" v-if="!corporation">{{'请选择'}}</text>
						<text class="right right2" v-else>{{corporation}}</text>
					</view>
				</picker>
				<view class="item u-border-bottom u-flex-center u-row-between">
					<text>快递单号</text>
					<input type="text" placeholder="请输入快递单号" placeholder-class="ipt-sty" v-model="orderNum" />
				</view>
				<view class="flex pop-button u-row-between">
					<view class="u-flex-center" @click="show3=false">取消</view>
					<view class="u-flex-center b2" @click="getFahuo()">确定</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="show4" :list="list3" label-name="name" value-name="code" @confirm="confirm1($event,3)"
			confirm-color="#606DCE"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				show5: false,
				refuse_content: "",
				type: "",
				show3: false,
				show4: false,
				list3: [],
				corporation: "",
				orderNum: "",
			};
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.$u.post('api/shop/get_order_kuaidi').then(res => {
				this.list3 = res.data
			})
		},
		onShow() {
			if (this.id) {
				this.getDetail()
			}
		},
		methods: {
			choseKd(e) {
				this.code = this.list3[e.detail.value].value
				this.corporation = this.list3[e.detail.value].name
			},
			getDetail() {
				this.$u.get('/api/refund/detail', {
					ids: this.id
				}).then(res => {
					console.log(res.data)
					this.detail = res.data
				})
			},
			//同意退款
			agree() {
				this.$u.post('/api/refund/agree', {
					ids: this.id
				}).then(res => {
					this.getDetail()
				})
			},
			//退款
			getTui() {
				this.$u.post('/api/refund/refuse', {
					ids: this.id,
					refuse_content: this.refuse_content
				}).then(res => {
					this.show5 = false
					this.getDetail()
				})
			},
			//查看大图
			look(item) {
				uni.previewImage({
					current: item, // 当前显示图片的http链接
					urls: this.detail.images // 需要预览的图片http链接列表
				});
			},
			//确认收货
			rece() {
				this.$u.post('/api/refund/receiving', {
					ids: this.id,
				}).then(res => {
					this.getDetail()
				})
			},
			confirm1(e, type) {
				if (type == 1) {
					this.current = e[0].value - 1
				} else if (type == 2) {
					this.take = e[0].value
				} else {
					this.code = e[0].value
					this.corporation = e[0].label
				}
			},
			//确认发货
			getFahuo() {
				if (this.type) {
					this.$u.post('/api/wanlshop/refund/toExpress ', {
						id: this.id,
						express_name: this.corporation,
						express_no: this.orderNum
					}).then(res => {
						if (res.code == 1) {
							this.getDetail();
							this.show3 = false
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					this.$u.post('/api/shop/shop_order_fh ', {
						order_id: this.id,
						express_name: this.corporation,
						express_no: this.orderNum
					}).then(res => {
						if (res.code == 1) {
							this.getDetail();
							this.show3 = false
						} else {
							this.$u.toast(res.msg)
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	@import url(@/components/common.css);

	.all {
		padding: 50rpx 24rpx 0;

		.card {
			width: 100%;
			margin-top: 18rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			.head-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.cont {
				width: 100%;

				.name {
					margin-bottom: 12rpx;
					font-size: 28rpx;
				}

				.cate {
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					padding: 3rpx;
					background: #fafafa;
					font-size: 22rpx;
					border-radius: 5rpx;
				}

				.price {
					font-size: 40rpx !important;
					font-weight: 550;
					color: #EF5205;

					text {
						font-weight: 500;
						font-size: 20rpx;
					}
				}
			}

			.number {
				width: 120rpx;
				text-align: right;
				font-size: 24rpx;
				color: #B0B0B0;
			}

			.button {
				width: fit-content;
				width: -webkit-fit-content;
				padding: 10rpx 14rpx;
				border: 1rpx solid #939393;
				font-size: 26rpx;
				border-radius: 5rpx;
			}

			.button2 {
				border: 1rpx solid #F43000;
				color: #F43000;
			}

			.button3 {
				border: 1rpx solid #606DCE;
				color: #606DCE;
			}

			.top-title {
				font-size: 32rpx;
				color: #333333;
			}

			.message-item {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #BEBEBE;

				view {
					flex-shrink: 0;
				}

				text {
					text-align: right;
					display: block;
					font-size: 28rpx;
					color: #333333;
				}

				.red-status {
					color: #F43000;
				}
			}
		}
	}

	.box {
		position: fixed;
		bottom: 0;
		padding: 20rpx 40rpx;
		width: 100%;
		background: #FFFFFF;

		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

		.btn {
			width: 316rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #BEBEBE;
			font-size: 28rpx;
			color: #BEBEBE;
		}

		.btn2 {
			color: #FFFFFF;
			background: linear-gradient(90deg, #606DCE 0%, #606DCE 100%);
		}

		.btn3 {
			width: 100%;
		}
	}

	/deep/.u-icon__icon {
		color: #fff !important;
	}

	.coupon {
		height: 100%;

		.cou_tit {
			padding: 30rpx 0;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 3;
			background-color: #606DCE;
		}

		.name {
			font-size: 28rpx;
			color: #333333;

			image {
				margin-right: 8rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 254rpx;
			}
		}

		.copy {
			font-size: 28rpx;
			color: #333333;
		}

		.cou_item {
			margin-bottom: 40rpx;
			position: relative;
			width: 100%;
			height: 210rpx;
			overflow: hidden;
			border-radius: 30rpx;

			.cou_grey {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 2;
				background: rgba(76, 76, 76, 0.5);
			}

			.left {
				width: 471rpx;
				height: 210rpx;
				background: #fff;
				padding: 27rpx 40rpx 0rpx 30rpx;

				.code {
					font-size: 22rpx;
					color: #666666;
				}

				.cou_price {
					margin-right: 25rpx;
					color: #E55D23;
					font-size: 88rpx;
					font-weight: 550;

					text {
						margin-top: 32rpx;
						font-size: 26rpx;
						margin-right: 10rpx;
					}
				}

				.title {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}

				.tips {
					margin-top: 10rpx;
					width: 154rpx;
					height: 31rpx;
					background: #E55D23;
					font-size: 20rpx;
					color: #FFFFFF;
				}

				.time {
					height: 20rpx;
					font-size: 22rpx;
					color: #666666;
					margin-top: 35rpx;
				}
			}

			.status {
				width: 220rpx;
				height: 210rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				background: #606DCE;
			}
		}
	}

	.u-node {
		width: 22rpx;
		height: 22rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #707070;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;

		text {
			color: #F43000;
		}
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
		font-weight: 500;
	}

	.card2 {
		width: 600rpx;
		padding: 0 40rpx;
		margin-bottom: 20rpx;

		.pop-tit {
			color: #606DCE;
			text-align: center;
			margin-top: 30rpx;
			font-size: 35rpx;
			font-weight: 550;
		}

		.item {
			padding: 40rpx 0;
			font-size: 30rpx;

			input {
				font-size: 30rpx;
				text-align: right;
			}

			.ipt-sty,
			.right {
				font-size: 30rpx;
				color: #B0B0B0;
			}

			.right2 {
				color: #333;
			}
		}

		.pop-button {
			margin-top: 40rpx;

			view {
				width: 48%;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1rpx solid #888;
				color: #888;
			}

			.b2 {
				background-color: #606DCE;
				border: none;
				color: #fff;
			}
		}
	}

	.bakbtn {
		width: 65rpx;
		height: 65rpx;
		position: fixed;
		top: 50rpx;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.bakbtn image {
		width: 40rpx;
		height: 40rpx;
	}

	.wulbtn {
		width: 630rpx;
		height: 80rpx;
		background: linear-gradient(98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1rpx solid rgba(0, 0, 0, 0);
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 0rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx auto;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: flex-end;
	}

	.wul_layer {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 0 50rpx 0;
	}

	.wultit {
		padding: 50rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: #606DCE;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.gbwul {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 30rpx;
		top: 50rpx;
	}

	.contbox {
		flex: 1;
		border: 1rpx solid #ededed;
		padding: 20rpx;
		margin-left: 30rpx;
	}

	.refimage {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
</style>